<template>
  <div style="background-color: rgb(246, 246, 246); width: 95%; height: 800px">
    <van-nav-bar
        title="确定订单"
        :left-text="leftText"
        :left-arrow="true"
        @click-left="onClickLeft"
    />
    <div style="margin-top: 20px; margin-left: 10px; background-color: white; width: 93%">
      <van-cell>
        <div style="display: flex; justify-content: space-between;">
          <span v-if="!mendian" style="margin-left: 10px">请先选择门店</span>
          <span v-else>{{ mendian.mdname }}</span>
          <van-button size="small" type="primary" @click="findMendianAll">选择门店</van-button>
        </div>
      </van-cell>
    </div>
    <br>
    <div style="width: 93%; margin-left: 10px; overflow-y: auto; height: 294px;">
      <div v-for="item in package" :key="item.id" style="background-color: rgb(252, 252, 252);">
        {{ item.name }}
        <br>
        ￥{{ totalMoney(item) }}
        <van-card
            v-for="item2 in item.carOrders"
            :key="item2.id"
            :desc="item2.introduce"
            :title="item2.name"
            :thumb="item2.photo"
            num="1"
        >
          <div slot="price">￥{{ item2.price }}</div>
        </van-card>
        工时费 ：{{ item.laborFee }}元
      </div>
    </div>
    <br>
    <div @click="showList = true" style="margin-left: 10px; height: 50px; width: 93%; background-color: white; align-items: center; display: flex; justify-content: space-between;">
      <span style="width: 100px; height: 30px; margin-top: 10px; margin-left: 10px">优惠卷<van-icon
          name="coupon-o"/></span>
      <span v-if="couponName && amount" style="width: 145px; height: 30px; margin-right: 10px">{{ couponName }} -￥{{ amount }}<van-icon name="arrow"/></span>
      <span v-else style="width: 145px; height: 30px; margin-right: 10px">请选择优惠卷<van-icon name="arrow"/></span>
    </div>

    <div v-if="showList" style="background-color: white; height: 300px; overflow-y: auto; border: 1px solid #3360c9; position: absolute; left: 70px; top: 250px;">
      <div v-for="coupon in coupons" :key="coupon.id" v-if="coupons.length>0">
        <el-radio v-model="index" :label="coupon.id" border @change="applyCoupons">选择</el-radio>
        优惠卷名称：{{ coupon.couponName }} <br>满{{ coupon.conditionAmount }}减{{ coupon.amount }}元 <br>
        有效期：{{ coupon.startTime }}至{{ coupon.endTime }}
        <br>
        <br>
      </div>
      <div v-if="coupons.length===0" style="margin-left: 10px">暂无可用优惠卷</div>
      <div style="margin-left: 10px; margin-top: 10px">
        <van-button size="small" type="primary" @click="showList = false">关闭</van-button>
      </div>
    </div>

    <van-submit-bar
        button-text="提交订单"
        @submit="onSubmit"
    >
      <div style="margin-right: 200px; color: red">
        <span style="color: red">￥{{ totalPrice() }}</span>
        <span style="color: red">已优惠￥{{ amount }}</span>
      </div>
    </van-submit-bar>

  </div>
</template>

<script>
import axios from 'axios'
import { findCouponUserList } from "@/api/category/category";

export default {
  data() {
    return {
      leftText: "返回",
      package: [],
      mendian: null,
      showList: false,
      price: 0,
      coupons: [],
      amount: '',
      couponName: '',
      index: '0'
    }
  },
  methods: {
    applyCoupons() {
      this.coupons.forEach(item => {
        if (item.id === this.index) {
          if (this.totalPrice2() < item.conditionAmount) {
            //消息提示
            this.$message.error("请选择符合条件的优惠券")
            return
          }
          this.amount = item.amount
          this.couponName = item.couponName
        }
      })
      this.showList = false
    },
    findCouponList() {
      findCouponUserList(this.price).then(res => {
        this.coupons = res.data
        console.log(this.coupons)
      })
    },
    totalPrice() {
      let price = 0
      this.package.forEach(item => {
        price += parseFloat(this.totalMoney(item)) + parseFloat(item.laborFee)
      })
      price -= this.amount
      return price.toFixed(2)
    },
    totalPrice2() {
      let price = 0
      this.package.forEach(item => {
        price += parseFloat(this.totalMoney(item)) + parseFloat(item.laborFee)
      })
      return price
    },
    totalMoney(row) {
      let money = 0
      row.carOrders.forEach(item => {
        money += item.price
      })
      this.price = (money * 0.95).toFixed(2)
      return this.price
    },
    findMendianAll() {
      this.$router.push('/SelectStore')
    },
    onSubmit() {
      this.$router.push('/OrderPrice')
    },
    onClickLeft() {
      this.$router.push('/fenlei')
    }
  },
  created() {
  },
  mounted() {
    this.package = JSON.parse(localStorage.getItem("settlement"))
    this.mendian = this.$route.query.MenDian
    this.findCouponList()
  }
}
</script>
